<template>
	<view id="home-and-country-feelings" class="digital-page">
		<back-btn></back-btn>
		<view class="banner">
			<view class="title-area">
				<div class="title-cn">家国情怀</div>
				<div class="title-en">Home and country feelings</div>
			</view>
		</view>
		<view class="main-content">
			<view class="header">
				家史 家事 家人
			</view>
			<view class="divider-h"></view>
			<scroll-view class="scroll-area" scroll-x="true">
				<view class="content">
					<view class="item" v-for="(v,k) in upper">
						<view class="serial">
							{{serial(k+1)}}
						</view>
						<view class="topic">
							{{v.Topic}}
						</view>
						<view class="avatar" :style="{backgroundImage: `url(${baseUrl + v.FeaturedImage})`}">
						</view>
						<view class="intro">
							{{v.Abstract}}
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import { onLoad } from '@dcloudio/uni-app'
	import useCategory from '@/stores/digitalPlatform/useServerData'
	import backBtn from './back.vue'
	//姚珅 @ 4月18日
	// 姚珅 @ 5月20日 返回组件添加以及绑定修改
	export default {
		components: {
			backBtn
		},
		data() {
			return {
				upper:[],
				baseUrl: ""
			}
		},
		onLoad(opt){
			let promise = useCategory(opt.title || "家国情怀");
			promise.then(msg => {
				this.upper = msg.data.upper;
				this.baseUrl = msg.baseUrl;
			})
		},
		methods:{
			serial(k) {
				return (k < 10 ? "0" : "") + k;
			}
		}
	}
</script>

<style lang="less">
	@import url(shared.less);
	@title-cn-size: 52rpx;
	@title-en-size: 20rpx;
	@title-size: 25rpx;
	@intro-size: 30rpx;
	@serial-size: 60rpx;
	@topic-size: 40rpx;
	#home-and-country-feelings {
		.title-area {
			width: calc(32rpx * 25);
		}

		.main-content {
			padding-bottom: 25rpx;
			
			.scroll-area {
				width: calc(100% - 25rpx);
				height: 750rpx;
				margin: 40rpx 25rpx;
				border-radius: 20rpx;
				overflow: hidden;
				.content {
					height: 100%;
					display: flex;
					.item {
						border-radius: 20rpx;
						margin-right: 10rpx;
						padding: 30rpx 25rpx;
						background-color: #fff;
						.serial {
						    font-size: @serial-size;
						    line-height: 1;
							font-weight: bold;
							color: #BFBFBF;
						    &::after {
						        content: ' ';
						        width: 30rpx;
						        height: 10rpx;
						        background: #7F7F7F;
						        margin-top: 30rpx;
						        display: block;
							}
						}
						.topic {
							margin-top: 40rpx;
							font-size: @topic-size;
							line-height: 35rpx;
							font-weight: bold;
							color: #7F7F7F;
						}
						.avatar {
							margin-top: 40rpx;
							width: 230rpx;
							height: 200rpx;
							border-radius: 20rpx;
							
							background-position: 50% 50%;
							background-size: cover;
						}
						.intro {
							margin-top: 25rpx;
							font-size: @intro-size;
							line-height: 1.5;
							color: #828282;
							.text-cut(5);
						}
					}
				}
			}
		}
	}
</style>
